import React from 'react'
import './css/Home.css'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'

export default function Home() {
  let loc = useLocation();
  let navigate = useNavigate();
  return (
    <div id='home'>
      <div className="home-top">
        <ul>
          <li>
            <span style={{ color: '#FF632C' }}>
              C
            </span>
            SDN
          </li>
          <li>创作中心</li>
        </ul>
        <ul>
          <li></li>
          <li>头像</li>
          <li>消息</li>
        </ul>
      </div>
      <div className="home-con">
        {
          loc.pathname == '/home/list' &&
          <div className="home-con-left">
            <div className='home-con-btn'>
              <button onClick={() => navigate('/home/index')}>
                发布
                <span className='span'>

                </span>
              </button>
            </div>
            <ul>
              <li>首页</li>
              <li>首页</li>
            </ul>
          </div>
        }
        <div className={loc.pathname == '/home/index' ? "home-con-right1" : "home-con-right"}>
          <Outlet></Outlet>
        </div>
      </div>
    </div>
  )
}
